Animated Portfolio

Animated Portfolio

This Portfolio website is a conclusion of my study about website perfomance and animations with NextJS

animated_portfolio

Cover

🚀 🟪 Animated Portfolio 🟪 🚀

This application is a conclusion of my study about website performance and animations with NextJS

|   Overview   |    Technologies   |    Project   |   Run   |   Author   |   

GitHub Instagram LinkedIn



| :artificial_satellite: About:

In this project, the target is to build a website that beats all the main factors and metrics that measure how fast and well-structured an application can be, along with good ranking and SEO strategies. These metrics are known as Web Vitals and improve all tech skills related to website animations.

For this, I built a Dev Portfolio website that you can use as a template, as it includes all features and visual designs with animations.


📡 | Hosted on Vercel: https://animated-portfolio-peach.vercel.app/


:building_construction: | Technologies and Concepts Studied:

  • NextJS
  • TailwindCSS
  • SASS
  • Typescript
  • Docker
  • EmailJS
  • Zod
  • Zustand
  • Framer Motion
  • Inversify
  • React Hook Form
  • React Hot Toast
  • eslint
  • Prettier
  • husky
  • lint-staged
  • Caching
  • Performance
  • SEO
  • Scalability
  • Web Vitals
  • Among Others...

💻 | Application:

This Portfolio shows the highlights of a developer, social media, and some projects with a call to action at the end of the page. Parallax, drawn, fade-in are some of the animations here. This project has a modular system with email sending, form validations, and more.



*Remember this software runs on free machines, with limited resources in the production environment. These were the results I obtained.


GT Metrix

GT Metrix

PageSpeed Insights - [PC]

Metrics PC

PageSpeed Insights - [Mobile]

Metrics Mobile

📡 | Hosted on Vercel: https://animated-portfolio-peach.vercel.app/


👨‍💻 | How to use:

Open your Git Terminal and clone this repository

$ git clone "git@github.com:Samuel-Ricardo/animated_portfolio.git"

Make Pull

$ git pull "git@github.com:Samuel-Ricardo/animated_portfolio.git"

This application uses Docker, so you don't need to install and configure anything other than Docker on your machine.

Docker

Navigate to the project folder $ cd ./animated_portfolio/ and run it using docker-compose:

$ docker-compose up --build   # For First Time run this command
$ docker-compose up           # to run project

APP: http://localhost:3000

:octocat: | Author:

Samuel Ricardo

- Samuel Ricardo